import slisd from "./components/process/index.vue";
import { showToast } from "vant";
import { getAllVideos,getMenus } from "../../api/video";
export default defineComponent({
  components: {
    slisd, // 引入子组件
  },
  setup(props) {
    // 创建响应式状态
    const state = reactive({
      isShowVideo: true,
      videos: [
        // { src: "http://demo.chenyulong.cn/video/qixiang1.mp4" },
        // { src: "http://demo.chenyulong.cn/video/qixiang7.mp4" },
        // { src: "http://demo.chenyulong.cn/video/qixiang2.mp4" },
        // { src: "http://demo.chenyulong.cn/video/qixiang3.mp4" },
        // { src: "http://demo.chenyulong.cn/video/qixiang4.mp4" },
        // { src: "http://demo.chenyulong.cn/video/qixiang5.mp4" },
        // { src: "http://demo.chenyulong.cn/video/qixiang6.mp4" },
      ],
      currentIndex: 0, // 当前播放的视频索引
      videoState: false, // 视频播放状态，true 表示正在播放，false 表示暂停
      currentTime: 0, // 当前播放时间
      duration: 0, // 视频总时长
      showProgress: false, // 是否显示播放进度条
      videoLoading: false, // 视频加载状态
      isItTheLastOne: false, //是否是最后一个视频
    });

    // 计算视频播放进度，返回百分比
    const updateProgress = computed(() => {
      return state.duration > 0
        ? Math.floor((state.currentTime / state.duration) * 100)
        : 0; // 如果总时长为0，进度为0
    });

    // 更新当前播放时间的方法
    const updateCurrentTime = (event) => {
      state.currentTime = event.target.currentTime; // 从事件中获取当前时间
    };

    // 设置视频事件监听器
    const setupVideoListeners = (video) => {
      video.addEventListener("timeupdate", updateCurrentTime); // 监听时间更新事件
      video.addEventListener("canplay", () => {
        state.duration = video.duration; // 获取视频总时长
        setTimeout(() => {
          state.showProgress = true; // 显示进度条
        }, 300);
      });
      video.addEventListener("playing", () => {
        state.videoLoading = false; // 播放状态，视频已准备好
      });
      video.addEventListener("waiting", () => {
        state.videoLoading = true; // 视频加载状态
      });
    };

    // 重置视频事件监听器
    const resetVideoListeners = (video) => {
      video.removeEventListener("timeupdate", updateCurrentTime); // 移除时间更新监听
      video.removeEventListener("canplay", setupVideoListeners); // 移除播放准备监听
    };

    // 监控当前索引的变化
    watch(
      () => state.currentIndex,
      (newIndex, oldIndex) => {
        const videos = document.querySelectorAll("video"); // 获取所有视频元素
        const currentVideo = videos[newIndex]; // 当前视频
        if (oldIndex !== undefined) {
          resetVideoListeners(videos[oldIndex]); // 重置前一个视频的监听器
        }
        currentVideo.play(); // 播放当前视频
        currentVideo.currentTime = 0; // 重置当前视频播放时间
        setupVideoListeners(currentVideo); // 设置当前视频的监听器

        if (oldIndex !== undefined) {
          videos[oldIndex].pause(); // 暂停前一个视频
        }
      }
    );
    // 组件挂载后执行的逻辑
    onMounted(() => {
      methods.getVideoList();
    });

    const methods = {
      initVideo() {
        // 将视频控制方法挂载到 window
        window.pauseVideo = () => {
          const video = document.querySelectorAll("video")[state.currentIndex];
          video.pause();
          resetVideoListeners(video);
        };

        window.playVideo = () => {
          const video = document.querySelectorAll("video")[state.currentIndex];
          video.play();
          state.videoState = false;
          methods.updateIconVisibility();
          setupVideoListeners(video);
        };
        setTimeout(() => {
          const initialVideo = document.querySelectorAll("video")[0]; // 获取第一个视频
          initialVideo.currentTime = 0; // 重置播放时间
          setupVideoListeners(initialVideo); // 设置第一个视频的监听器
        }, 300);
      },
      // 获取视频列表
      async getVideoList() {
        try {
          let result = await getAllVideos();          
          if (result.code == 200) {
            state.videos = result.data;
            methods.initVideo();
            state.isShowVideo = state.videos.length > 0;
          }
        } catch (error) {
          state.isShowVideo = false;
          showToast("获取视频列表失败");
        }
      },
      // 更新视频播放时间，基于用户选择的进度值
      updateTime(value) {
        const video = document.querySelectorAll("video")[state.currentIndex]; // 获取当前视频
        video.currentTime = (value / 100) * state.duration; // 计算并设置当前播放时间
        video.play(); // 播放视频
        state.videoState = false; // 更新视频状态为非播放状态
      },
      // 格式化时间为“分:秒”或“时:分:秒”格式
      formatTime(seconds) {
        const h = Math.floor(seconds / 3600); // 计算小时
        const m = Math.floor((seconds % 3600) / 60); // 计算分钟
        const s = Math.floor(seconds % 60); // 计算秒
        // 返回格式化的时间字符串
        return h > 0
          ? `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`
          : `${m}:${String(s).padStart(2, "0")}`;
      },
      // 切换播放和暂停状态
      togglePlayPause(event) {
        const video = event.target; // 当前视频元素
        state.videoState ? video.play() : video.pause(); // 切换播放状态
        state.videoState = !state.videoState; // 更新状态
        methods.updateIconVisibility(); // 更新图标显示状态
      },
      // 更新图标
      updateIconVisibility() {
        const icons = document.querySelectorAll(".video-icon");
        icons.forEach((icon, index) => {
          icon.style.display = index == state.currentIndex ? "block" : "none";
          if (!state.videoState) {
            setTimeout(() => {
              icon.style.display = "none";
              state.showProgress = false;
            }, 3000);
          } else {
            state.showProgress = true;
          }
        });
      },
      // 播放指定索引的视频
      playIndexVideo(index) {
        state.currentIndex = index; // 更新当前索引
        const video = document.querySelectorAll("video")[index]; // 获取指定索引的视频
        methods.togglePlayPause({ target: video }); // 切换播放状态
      },
      // 处理视频切换事件
      onSwipeChange(index) {
        state.showProgress = false; // 隐藏进度条
        state.videoState = false; // 重置视频状态
        state.currentIndex = index; // 更新当前索引
      },
      dragStart(event) {
        if (state.isItTheLastOne && event.index + 1 == state.videos.length) {
          showToast({
            message: "暂无更多视频",
            position: "top",
          });
          state.isItTheLastOne = false;
        }
        if (event.index + 1 == state.videos.length) {
          state.isItTheLastOne = true;
        } else {
          state.isItTheLastOne = false;
        }
      },
    };

    return {
      updateProgress,
      ...toRefs(state),
      ...methods,
    };
  },
});
